<template>
  <div :class="['comment-list', $isMobile ? 'mobile' : '']">
    <div class="list-content">
      <DynamicScroller
        ref="dynamicScrollerRef"
        class="scroller no-scrollbar"
        :items="commentList"
        :min-item-size="54"
        key-field="id"
        @resize="scrollToBottom()"
      >
        <template #default="{ item, index, active }">
          <DynamicScrollerItem
            :item="item"
            :active="active"
            :size-dependencies="[item.content]"
            :data-index="index"
            :data-active="active"
          >
            <template v-if="$isMobile">
              <div class="mobile-msg">
                <div class="msg-content">
                  <span class="current" v-if="currentUserId === item.userId">
                    [我]
                  </span>
                  <span class="user-name">{{ item.userName }}: </span>
                  <span class="content">{{ item.content }}</span>
                </div>
              </div>
            </template>
            <template v-else>
              <div
                :class="[
                  'comment-msg',
                  currentUserId === item.userId ? 'ismine' : '',
                ]"
              >
                <div class="user">{{ item.userName[0] }}</div>
                <div class="content-msg">
                  <div class="user-name">{{ item.userName }}</div>
                  <div class="content">
                    {{ item.content }}
                  </div>
                </div>
              </div>
            </template>
          </DynamicScrollerItem>
        </template>
      </DynamicScroller>
    </div>
  </div>
  <div class="mobile-send" v-if="$isMobile">
    <el-input
      v-model="comment"
      :maxlength="40"
      placeholder="请输入留言(40字以内)"
      :enterkeyhint="'send'"
      @keydown.enter="inputEnter"
    >
      <template #append>
        <div class="send-icon" @click="addComment">发 送</div>
      </template>
    </el-input>
  </div>
  <div class="send-comment" v-else>
    <div class="comment-box">
      <div class="title">留言</div>
      <el-input
        v-model="comment"
        :maxlength="40"
        placeholder="请输入留言(40字以内)"
        @keydown.enter="inputEnter"
      ></el-input>
      <div class="send" @click="addComment">发送</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, defineExpose, onBeforeUnmount, computed } from 'vue'
import { throttle } from 'lodash'

import { getLiveComments, addLiveComment } from '@/api/live'
import { VantMessage } from '@/utils/vant-utils'
import { useAuthStore } from '@/store/auth'

const authStore = useAuthStore()

const props = defineProps({
  id: {
    type: String,
    default: ''
  },
  liveId: {
    type: String,
    default: ''
  }
})
let timeId = 0

const commentList = ref([])
const comment = ref('')
const dynamicScrollerRef = ref(null)

const sendCount = ref(4)
const currentUserId = computed(() => authStore.userId)

// 调到底部, 截流当前调用短时间的数据进入，造成卡顿
const scrollToBottom = throttle(() => {
  if (dynamicScrollerRef.value) {
    dynamicScrollerRef.value.scrollToBottom()
  }
}, 1000)

// 获取留言列表
const getList = async() => {
  commentList.value = []
  const res = await getLiveComments(props.id)
  commentList.value = (res && res.data) || []
  scrollToBottom()
}

// 添加留言
const pushComment = (item) => {
  commentList.value.push(item)
  scrollToBottom()
}

const inputEnter = () => {
  addComment()
}

// 添加留言
const addComment = async() => {
  if (sendCount.value <= 0) {
    VantMessage.warning('一分钟内最多留言4次，请稍候')
    return
  }
  // 无值不发送
  if (!comment.value) {
    return
  }
  try {
    const res = await addLiveComment({
      id: props.id,
      liveId: props.liveId,
      content: comment.value
    })
    if (res.code && res.code === 1) {
      sendCount.value = sendCount.value - 1
      // VantMessage.success('发送留言成功')
    }
    comment.value = ''
  } catch (error) {
    VantMessage.error('发送留言失败')
  }
}

const getComment = () => {
  console.log('commentList', commentList.value)
}

onMounted(() => {
  // getList()
  timeId = setInterval(() => {
    sendCount.value = 4
  }, 60 * 1000)
})

onBeforeUnmount(() => {
  if (timeId) {
    clearInterval(timeId)
  }
})

defineExpose({
  getList,
  pushComment
})
</script>

<style lang="less" scoped>
.comment-list {
  flex: 1;
  width: 100%;
  padding: 0 10px;
  overflow: hidden;
  background-color: #f2f2f2;
  &.mobile {
    padding: 0;
    /* prettier-ignore */
    padding-bottom: 64PX;
    .list-content {
      border-radius: 0;
      padding: 0 15px;
    }
  }
  .list-content {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    padding: 0 5px;
    overflow: hidden;
  }
  .scroller {
    height: 100%;
  }
  .comment-msg {
    width: 100%;
    overflow: hidden;
    clear: both;
    padding: 5px 0;
    &.ismine {
      .user,
      .content-msg {
        float: right;
        .user-name {
          text-align: right;
        }
      }
      .user {
        background-color: var(--vb-primary-color-light);
        color: #fff;
      }
      .content {
        background-color: var(--vb-primary-color-light-5);
      }
    }
    .user {
      font-size: 16px;
      float: left;
      line-height: 30px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #d7d7d7;
      color: var(--vb-title-color);
      text-align: center;
      margin: 0 5px;
      box-shadow: 0 0 5px #d8d8d8;
    }
    .content-msg {
      width: 190px;
      float: left;
      overflow: hidden;
      margin: 0 5px;
      .user-name {
        height: 20px;
        font-size: 12px;
        color: var(--el-text-color-primary);
        padding: 0 5px;
      }
    }
    .content {
      min-height: 20px;
      width: 190px;
      font-size: 16px;
      overflow: hidden;
      line-height: 20px;
      background-color: #fff;
      padding: 5px;
      border-radius: 5px;
      color: var(--vb-title-color);
    }
  }

  .mobile-msg {
    width: 70%;
    padding: 5px 0;
    .msg-content {
      background-color: #fff;
      /* prettier-ignore */
      min-height: 34PX;
      /* prettier-ignore */
      line-height: 24PX;
      /* prettier-ignore */
      border-radius: 5PX;
      overflow: hidden;
      font-size: 14px;
      /* prettier-ignore */
      padding: 5PX 10PX;
      box-shadow: 0 0 5px #f1f1f1;
      .user-name {
        color: #999;
      }
      .current {
        color: var(--vb-primary-color);
        font-weight: bold;
      }
      .content {
        color: var(--vb-title-color);
      }
    }
  }
}
.mobile-send {
  width: 100%;
  /* prettier-ignore */
  height: 64PX;
  position: fixed;
  left: 0;

  bottom: 0;
  /* prettier-ignore */
  padding: 10PX 15PX;
  z-index: 10;
  // background-color: #fff;
  &:deep(.el-input) {
    /* prettier-ignore */
    height: 44PX;
    border: none;
    outline: none;
    box-shadow: none;
    .el-input__wrapper {
      border: none;
      box-shadow: none;
      /* prettier-ignore */
      border-radius: 22PX 0 0 22PX;
      background-color: #fff;
    }
    .el-input-group__append {
      background-color: #fff;
      box-shadow: none;
      padding: 0 10px;
      /* prettier-ignore */
      border-radius: 0 22PX 22PX 0;
    }
  }
  .send-icon {
    /* prettier-ignore */
    width: 70PX;
    /* prettier-ignore */
    height: 30PX;
    /* prettier-ignore */
    border-radius: 15PX;
    text-align: center;
    /* prettier-ignore */
    line-height: 30PX;
    background-color: var(--vb-primary-color);
    color: #fff;
    font-size: 14px;
  }
}

.send-comment {
  height: 60px;
  padding: 8px 10px;
  .comment-box {
    width: 100%;
    height: 100%;
    background-color: #fff;
    /* prettier-ignore */
    border: 1PX solid #ececec;
    display: flex;
    flex-direction: row;
    align-items: center;
    .title {
      width: 50px;
      height: 100%;
      display: block;
      line-height: 44px;
      text-align: center;
      font-size: 14px;
      color: var(--vb-primary-color);
      /* prettier-ignore */
      border-right: 1PX solid #ececec;
    }
    .send {
      width: 50px;
      height: 100%;
      line-height: 44px;
      text-align: center;
      background-color: var(--vb-primary-color);
      font-size: 14px;
      color: #fff;
    }
    &:deep(.el-input) {
      flex: 1;
      width: auto;
      .el-input__wrapper {
        /* prettier-ignore */
        border: none;
        outline: none;
        box-shadow: none;
      }
    }
  }
}
</style>
